const user_enroll_index = {
    template:`
            <div>
                <h3 class="py-4">Enroll for {{event_name}}</h3>
                <div class="row border-bottom">
                    <div class="col-4">
                        <div class="form-group">
                            <label>First Name</label>
                            <input class="form-control" type="text" v-model="form.firstname">
                        </div>
                        <div class="form-group">
                            <label>Last Name</label>
                            <input class="form-control" type="text" v-model="form.lastname">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input class="form-control" type="email" v-model="form.email">
                        </div>
                        <div class="form-group">
                            <label>Phone</label>
                            <input class="form-control" type="tel" v-model="form.phone">
                        </div>
                    </div>
                </div>
                <div class="my-3">
                    <button class="btn btn-primary" @click="submit">Save Event</button>
                    <a class="text-primary mx-4" @click="$router.go(-1)">Cancel</a>
                </div>
            </div>
    `,
    props:['event_id'],
    data(){
        return {
            event_name:null,
            form:{
                firstname:null,
                lastname:null,
                email:null,
                phone:null
            }
        }
    },
    methods:{
        submit(){
            ajax.post(`enroll/${this.event_id}`,this.form).then(res =>{
                if (res.status === 200){
                    Bus.$emit('m','Join in this event success');
                    this.$router.push({name:'user.enroll.enrollment'})
                }
            })
        }
    },
    mounted(){
        this.event_name = this.$route.query.event_name;
    }
}